<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="script/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/drag.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<style type="text/css">
</style>


<script src="script/jquery-3.3.1.min.js"></script>
<script src="script/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="module" src="script/main.js"></script>
<script type="module"></script>
</head>
<body >

<div class="container-fluid">
	<div class="jumbotron">
		<h1>表单设计器</h1>
		<p>...</p>
		<!--<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>-->
	</div>

	<div class="page-header">
		<h1>表单设计器 <small> drag designer</small></h1>
	</div>

	<div class="row">
		<div class="col-md-3 col-lg-2">

			

				


			<div class="panel panel-default">
				<div class="panel-heading">布局</div>
				<div class="panel-body">
					<div id="layoutMenu">
						
					</div>
				</div>

				<!-- Default panel contents -->
				<div class="panel-heading">容器</div>
				<div class="panel-body" id="containerMenu">
					
				</div>

				<!-- Default panel contents -->
				<div class="panel-heading">组件</div>
				<div class="panel-body" id="componentMenu">
					
				</div>
			
			</div>





				
		</div>
		<div class="col-md-9 col-lg-10">
			<div id="targetDiv"></div>
		</div>
	</div>
</div>








<pre>

<b>可以拖动的属性：</b>

draggable  true：可以拖动   false：不可以拖动

<b>被拖动的源对象可以触发的事件：</b>

ondragstart：源对象开始被拖动

ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)

ondragend：源对象被拖动结束

<b>拖动源对象可以进入到上方的目标对象可以触发的事件：</b>

ondragenter：目标对象被源对象拖动着进入

ondragover：目标对象被源对象拖动着悬停在上方

ondragleave：源对象拖动着离开了目标对象

ondrop：源对象拖动着在目标对象上方释放/松手


</pre>
</body>
</html>
